<template>
    <div class="tab-bar" v-if="navbarList.length > 0">
        <router-link class="tab-bar-item" v-for="item in navbarList" :key="item.id" :to="item.to">
            <span class="bottom-navbar-item-img">
                <i class="iconfont" :class="item.class"></i>
            </span>
            <span class="bottom-navbar-item-desc">{{ item.title }}</span>
        </router-link>
    </div>
</template>
<script>
/* 有点小蠢,写完了才看到VantUI直接就有底部导航栏 */
export default {
    name: 'BottomNavbar',
    data() {
        return {
            navbarList: [
                { id: 1, title: '电影', class: 'icon-dianying', to: '/films' },
                { id: 2, title: '影院', class: 'icon-yingyuan', to: '/cinemas' },
                { id: 3, title: '资讯', class: 'icon-zixun', to: '/news' },
                { id: 4, title: '我的', class: 'icon-wode', to: '/center' }
            ]
        }
    }
}
</script>

<style>
.tab-bar {
    display: flex;
    position: fixed;
    bottom: 0;
    width: 100%;
    /* max-width: 700px; */
    height: 50px;
    background-color: #fff;
}

.tab-bar-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #797d82;
    font-size: 14px;
}

.router-link-active {
    color: orangered;
}

.bottom-navbar-item-img i {
    font-size: 20px;
}
</style>